/* 此文件要在element主样式文件之后引入 */
/* 用了这种方法后，你不需要重写任何elementplus组件的颜色 */

:root
  // 主题色
  --mc-main-color: #1E63F5 // 系统内的主题蓝色
  --mc-navicon-color: #BCD0FC // 系统内的导航字或icon色
  --mc-loading-color: #78A1F9 // 系统内的加载
  --mc-hover-color: #4B82F7 // 系统内的hover
  --mc-pressed-color: #184FC4 // 系统内的pressed

  // 辅助色
  --mc-secondary1-color: #69E4A4 // 辅助色1
  --mc-secondary2-color: #A5EFC8 // 辅助色2
  --mc-secondary3-color: #87E9B6 // 辅助色3
  --mc-secondary4-color: #54B683 // 辅助色4

  // 系统色
  --mc-success-color: #18D078 // 系统内的绿色
  --mc-error-color: #FC5926 // 系统内的红色
  --mc-warning-color: #F3C63D // 系统内的橙色
  --mc-link-color: #1C61F1 // 系统内的链接色

  // 功能色
  --mc-pink-color: #FFEEE9 // 系统内的粉色
  --mc-cyan-color: #EBFCF3 // 系统内的淡青色
  --mc-lightorange-color: #EBFCF3 // 系统内的淡黄色
  --mc-lightblue-color: #EBFCF3 // 系统内的淡蓝色

  // 中性色
  --mc-white-color: #fff // 白色
  --mc-gray1-color: #FAFAFA // 灰色1
  --mc-gray2-color: #F7F7F7 // 灰色2
  --mc-gray3-color: #F2F2F2 // 灰色3
  --mc-gray4-color: #E6E6E6 // 灰色4
  --mc-gray5-color: #A6A6A6 // 灰色5

  // 导航相关
  --nav-bg-color: #ffffff; // 导航背景颜色
  --nav-font-color: #091E49;
  --nav-active-color: var(--mc-main-color); // tab选中颜色
  --nav-iconfont-color-1: var(--mc-gray4-color); // 工作台hover
  --nav-iconfont-color-2: #DCDCDC; // 图标active
  --nav-iconfont-color-3: var(--mc-gray3-color); // 图标hover
  --nav-dropdown-color-1: #ffffff; // 头像下拉背景
  --nav-line: var(--mc-gray4-color);

  // 这个是element主要按钮:active的颜色，当主题更改后此变量的值也随之更改
  --el-color-primary-dark: var(--mc-main-color) !important;
  color-scheme: light;
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary: var(--mc-main-color);
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #f89898;
  --el-color-error-light-5: #fab6b6;
  --el-color-error-light-7: #fcd3d3;
  --el-color-error-light-8: #fde2e2;
  --el-color-error-light-9: #fef0f0;
  --el-color-error-dark-2: #c45656;
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: var(--mc-gray1-color);
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #ffffff;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),0px 8px 20px rgba(0, 0, 0, 0.08);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),0px 12px 32px rgba(0, 0, 0, 0.12),0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);
  --el-overlay-color: rgba(0, 0, 0, 0.8);
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
  --el-mask-color: rgba(255, 255, 255, 0.9);
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
  --el-svg-monochrome-grey: var(--el-border-color);

/* 核心组件的变量，下面这些样式是必须要写的 */

.el-link.el-link--primary:hover
  color: var(--el-color-primary-light-2) !important;

.el-tag
  --el-tag-bg-color: var(--el-color-primary-light-9);
  --el-tag-border-color: var(--el-color-primary-light-8);
  --el-tag-text-color: var(--el-color-primary);
  --el-tag-hover-color: var(--el-color-primary);

.el-button--default:active
  color: var(--el-color-primary-dark) !important;
  border-color: var(--el-color-primary-dark) !important;

.el-button--primary
  --el-button-bg-color: var(--el-color-primary) !important;
  --el-button-border-color: var(--el-color-primary) !important;
  --el-button-hover-bg-color: var(--el-color-primary-light-3) !important;
  --el-button-hover-border-color: var(--el-color-primary-light-3) !important;
  --el-button-active-bg-color: var(--el-color-primary-dark) !important;
  --el-button-active-border-color: var(--el-color-primary-dark) !important;

.mc-call-variable
  --mc-call-color-idle: var(--mc-main-color)
  --mc-call-color-ringing: var(--mc-warning-color)
  --mc-call-color-connect: var(--mc-success-color)
  --mc-call-color-missed: var(--mc-error-color)
  --mc-call-card-bg: var(--mc-gray1-color)
  --mc-call-card-font-color: rgba(0, 0, 0, 0.88)
.mc-cs-nav-variable
  --mc-cs-nav-bg-color:  #061431
  --mc-cs-nav-item-color: #BBD0FC
  --mc-cs-nav-item-active-bg: var(--mc-main-color)
  --mc-cs-nav-item-active-color: #FFFFFF  

